import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

/* 
AnimatedContainer     带动画效果的Container   
AnimatedPadding       带动画效果的Padding
AnimatedOpacity       带动画效果的Opacity
AnimatedPositioned    带动画效果的Positioned 
AnimatedSwitcher      带动画的切换器
AnimatedDefaultTextStyle   文字样式


CircularProgressIndicator()   加载中的圆圈


- 设置动画时长 duration: Duration( milliseconds: 400)
- 设置动画样式 curve：Curves.easeIn

*/

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;
  @override
  Widget build(BuildContext context) {
    // 不覆盖顶部状态条的侧边栏
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {
            setState(() {
              flag = !flag;
            });
          },
        ),
        appBar: AppBar(
          title: const Text('Title'),
        ),
        //  侧边栏
        // body: sideBar(flag: flag));
        // Switcher
        body: Switcher(flag: flag));

    // 全屏的侧边栏
    // return Stack(
    //   children: [
    //     Scaffold(
    //       floatingActionButton: FloatingActionButton(
    //         child: const Icon(Icons.add),
    //         onPressed: () {
    //           setState(() {
    //             flag = !flag;
    //           });
    //         },
    //       ),
    //       appBar: AppBar(
    //         title: const Text('Title'),
    //       ),
    //       body: Stack(
    //         children: [
    //           ListView(
    //             children: [
    //               ListTile(
    //                 title: Text("我是一个列表"),
    //               )
    //             ],
    //           ),
    //         ],
    //       ),
    //     ),
    //     Positioned(
    //         left: 0,
    //         top: 0,
    //         bottom: 0,
    //         child: AnimatedContainer(
    //           // 动画时长  Duration(seconds: 1, milliseconds: 100),  // 分别对应 seconds 秒  milliseconds 毫秒
    //           duration: Duration( milliseconds: 400),
    //           width: 180,
    //           height: double.infinity,
    //           transform: flag
    //               ? Matrix4.translationValues(-200, 0, 0)
    //               : Matrix4.translationValues(0, 0, 0),
    //           color: Colors.blueAccent,
    //         ))
    //   ],
    // );
  }
}

// 侧边栏
class sideBar extends StatefulWidget {
  final bool flag;
  const sideBar({super.key, required this.flag});

  @override
  State<sideBar> createState() => _sideBarState();
}

class _sideBarState extends State<sideBar> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ListView(
          children: [
            AnimatedDefaultTextStyle(
              duration: const Duration(seconds: 1),
              style: TextStyle(
                  fontSize: widget.flag ? 20 : 30, color: Colors.black),
              child: const Text("你好Flutter"),
            ),
          ],
        ),
        Positioned(
            right: 0,
            top: 0,
            bottom: 0,
            child: AnimatedContainer(
              // 动画时长  Duration(seconds: 1, milliseconds: 100),  // 分别对应 seconds 秒  milliseconds 毫秒
              duration: Duration(milliseconds: 400),
              curve: Curves.easeIn,
              width: 180,
              height: double.infinity,
              transform: widget.flag
                  ? Matrix4.translationValues(200, 0, 0)
                  : Matrix4.translationValues(0, 0, 0),
              color: Colors.blueAccent,
            ))
      ],
    );
  }
}

// Switcher
class Switcher extends StatelessWidget {
  final bool flag;
  const Switcher({super.key, required this.flag});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
          alignment: Alignment.center,
          width: 300,
          height: 220,
          color: Colors.blue,
          child: AnimatedSwitcher(
            //当子元素改变的时候会触发动画
            transitionBuilder: ((child, animation) {
              //可以改变动画效果
              return ScaleTransition(
                scale: animation,
                child: FadeTransition(
                  opacity: animation,
                  child: child,
                ),
              );
            }),
            duration: Duration(seconds: 1),
            // 切换图片和加载中 
            // child: flag
            //     ? CircularProgressIndicator()
            //     : Image.network(
            //         "https://www.itying.com/images/flutter/2.png",
            //         fit: BoxFit.cover,
            //       ))

            // 一个文本的切换
            child: Text(
              key: UniqueKey(),
              flag ? "hello Flutter" : "this is flutter",
              style: Theme.of(context).textTheme.bodyMedium
            ),
          )),
    );
  }
}
